<!--<template>-->
<!--  <el-dialog :title="!dataForm.id ? '新建' :'编辑'"-->
<!--             :close-on-click-modal="false" append-to-body-->
<!--             :visible.sync="visible" class="JNPF-dialog JNPF-dialog_center" lock-scroll-->
<!--             width="1200px">-->
    <template>
      <transition name="el-zoom-in-center">
        <div class="JNPF-preview-main flow-form-main">
          <div class="JNPF-common-page-header">
            <el-page-header @back="goBack" :content="!dataForm.id ? '新建' :'编辑'"/>
            <div class="options">
              <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> {{ '提 交' }}
              </el-button>
              <el-button @click="goBack()"> {{ $t('common.cancelButton') }}
              </el-button>
            </div>
          </div>
          <el-tabs class="JNPF-el_tabs">
    <el-row :gutter="15" class="">
      <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="top">
        <template v-if="!loading">
          <el-col :span="24">
            <el-card class="mb-20" shadow="always" header="处置信息">
              <el-col :span="8">
                <el-form-item label="处置标题"
                              prop="disposalTitle">
                  <el-input v-model="dataForm.disposalTitle"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="处置方式"
                              prop="disposalType">
                  <el-select v-model="dataForm.disposalType"
                             placeholder="请选择" clearable :style='{"width":"100%"}' filterable>
                    <el-option v-for="(item, index) in disposalTypeOptions" :key="index" :label="item.fullName"
                               :value="item.enCode" :disabled="item.disabled"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="开始日期"
                              prop="startDate">
                  <el-date-picker v-model="dataForm.startDate"
                                  placeholder="请选择" clearable :style='{"width":"100%"}' type="date" format="yyyy-MM-dd"
                                  value-format="timestamp">

                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经办人"
                              prop="disposalAgent">
                  <el-input v-model="dataForm.disposalAgent"
                            placeholder="请输入" clearable :style='{"width":"100%"}'>

                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="处置单位"
                              prop="disposalUnit">
                  <el-select v-model="dataForm.disposalUnit"
                             placeholder="请选择" clearable :style='{"width":"100%"}' filterable>
                    <el-option v-for="(item, index) in disposalUnitOptions" :key="index" :label="item.fullName"
                               :value="item.enCode" :disabled="item.disabled"></el-option>

                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="处置说明"
                              prop="disposalSpecification">
                  <el-input v-model="dataForm.disposalSpecification"
                            placeholder="请输入" :style='{"width":"100%"}' true type="textarea"
                            :autosize='{"minRows":4,"maxRows":4}'>

                  </el-input>
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
          <el-col :span="24">
            <el-card class="mb-20" shadow="always" header="处置资产">
              <el-col :span="24">
                <el-form-item label-width="0">
                  <el-table :data="dataForm.zcassetdisposedetailsList" size='mini'>
                    <el-table-column type="index" width="50" label="序号" align="center"/>
                    <el-table-column prop="assetName" label="资产名称" align="center"/>
                    <el-table-column prop="assetCode" label="资产编码" align="center"/>
                    <el-table-column prop="detailedAddress" label="地址" align="center"/>
                    <el-table-column label="操作" width="50">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text" class="JNPF-table-delBtn"
                                   @click="delzcassetdisposedetailsList(scope.$index)">删除
                        </el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="table-actions" @click="openSelectDialog('zcassetdisposedetailsList')">
                    <el-button type="text" icon="el-icon-plus">添加</el-button>
                  </div>
                </el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </template>
      </el-form>
      <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                    ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"/>
    </el-row>
<!--    <span slot="footer" class="dialog-footer">-->
<!--        <el-button @click="visible = false"> 取 消</el-button>-->
<!--        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>-->
<!--    </span>-->
<!--  </el-dialog>-->
          </el-tabs>
        </div>
      </transition>
</template>
<script>
import request from '@/utils/request'
import {getDataInterfaceRes} from '@/api/systemData/dataInterface'
import {getDictionaryDataSelector} from '@/api/systemData/dictionary'
import SelectDialog from '@/components/SelectDialog'

export default {
  components: {SelectDialog},
  props: [],
  data() {
    return {
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {
        zcassetdisposedetailsList: {
          "popupType": "dialog",
          "hasPage": true,
          "popupTitle": "选择数据",
          "pageSize": 20,
          "columnOptions": [{"label": "资产名称", "value": "ASSET_NAME"}, {
            "label": "资产编码",
            "value": "ASSET_CODE"
          }, {"label": "详细地址", "value": "DETAILED_ADDRESS"}],
          "interfaceId": "612769091110831365",
          "interfaceName": "查询资产信息",
          "relationOptions": [
            {"field": "assetId", "type": 1, "value": "id"},
            {
              "field": "assetCode",
              "type": 1,
              "value": "ASSET_CODE"
            },
            {
              "field": "assetName",
              "type": 1,
              "value": "ASSET_NAME"
            },
            {
              "field": "detailedAddress",
              "type": 1,
              "value": "DETAILED_ADDRESS"
            }],
          "templateJson": [],
          "popupWidth": "800px"
        },
      },
      tableRows: {
        zcassetdisposedetailsList: {
          assetId: '',
          assetCode: '',
          assetName: '',
          detailedAddress: ''
        },
      },
      currVmodel: "",
      dataForm: {
        disposalTitle: '',
        disposalType: "",
        startDate: '',
        disposalAgent: '',
        disposalUnit: "",
        disposalSpecification: '',
        zcassetdisposedetailsList: [],
      },
      rules:
        {
          disposalTitle: [
            {
              required: true,
              message: '请输入',
              trigger: 'blur'
            },
          ],
          disposalType: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          startDate: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],
          disposalUnit: [
            {
              required: true,
              message: '请选择',
              trigger: 'change'
            },
          ],


        },
      disposalTypeOptions: [],
      disposalUnitOptions: [],

    }
  },
  computed: {
    // title() {
    //   // if ([2, 3, 4].includes(this.setting.opType)) return this.fullName
    //   // return this.thisStep ? this.fullName + '/' + this.thisStep : this.fullName
    //   return "新增"
    // }
  },
  watch: {},
  created() {
    this.getdisposalTypeOptions();
    this.getdisposalUnitOptions();
  },
  mounted() {
  },
  methods: {
    goBack() {
      this.$emit('close', false)
    },
    zcassetdisposedetailsExist() {
      let isOk = true;
      for (let i = 0; i < this.dataForm.zcassetdisposedetailsList.length; i++) {
        const e = this.dataForm.zcassetdisposedetailsList[i];
      }
      return isOk;
    },
    getdisposalTypeOptions() {
      getDictionaryDataSelector('610927980662751941').then(res => {
        this.disposalTypeOptions = res.data.list
      })
    },
    getdisposalUnitOptions() {
      getDictionaryDataSelector('610824142995849541').then(res => {
        this.disposalUnitOptions = res.data.list
      })
    },
    clearData() {
      this.dataForm.disposalTitle = '';
      this.dataForm.disposalType = "";
      this.dataForm.startDate = '';
      this.dataForm.disposalAgent = '';
      this.dataForm.disposalUnit = "";
      this.dataForm.disposalSpecification = '';
      this.dataForm.zcassetdisposedetailsList = [];
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields();
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/zc/ZcAssetDispose/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          });
        } else {
          this.clearData()
        }
      });
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          if (!this.zcassetdisposedetailsExist()) return
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()
      if (!this.dataForm.id) {
        request({
          url: '/api/zc/ZcAssetDispose',
          method: 'post',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      } else {
        request({
          url: '/api/zc/ZcAssetDispose/' + this.dataForm.id,
          method: 'PUT',
          data: _data
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    addzcassetdisposedetailsList() {
      let item = {
        assetId: '',
        assetCode: '',
        assetName: '',
        detailedAddress: ''
      }
      this.dataForm.zcassetdisposedetailsList.push(item)
    },
    delzcassetdisposedetailsList(index) {
      this.dataForm.zcassetdisposedetailsList.splice(index, 1);
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = {...this.tableRows[this.currVmodel], ...data[i]}
        if (this.dataForm[this.currVmodel] && this.dataForm[this.currVmodel].length > 0) {
          if (this.dataForm[this.currVmodel].some(o => o.assetId === item.assetId)) {
            continue
          }
        }
        this.dataForm[this.currVmodel].push(item)
      }
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      for (let i = 0; i < _data.zcassetdisposedetailsList.length; i++) {
        var _list = _data.zcassetdisposedetailsList[i];
      }
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      for (let i = 0; i < _dataAll.zcassetdisposedetailsList.length; i++) {
        var _list = _dataAll.zcassetdisposedetailsList[i];
      }
      this.dataForm = _dataAll
    },
  },
}

</script>
